<template>
    <div  class="page-container is-form">
        <a-spin :spinning="spinning">
            <a-form :layout="formLayout" :form="form">
                <a-form-item label='桶押金金额' v-bind="formItemLayout">
                   <a-input-number :min="0" :precision="2"  :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                   :parser="value => value.replace(/\￥\s?|(,*)/g, '')" v-decorator="['depositAmount',{rules:[{required: true, message: '请输入桶押金金额!'}]}]"  style="width: 300px;"></a-input-number>
                </a-form-item>
                <a-form-item label='订单起送价' v-bind="formItemLayout">
                   <a-input-number :min="0" :precision="2" :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                   :parser="value => value.replace(/\￥\s?|(,*)/g, '')" v-decorator="['beginPrice',{rules:[{required: true, message: '请输入订单起送价!'}]}]"  style="width: 300px;"></a-input-number>
                </a-form-item>
                <a-form-item label='订单配送费' v-bind="formItemLayout">
                   <a-input-number :min="0" :precision="2" :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                   :parser="value => value.replace(/\￥\s?|(,*)/g, '')" v-decorator="['deliverPrice',{rules:[{required: true, message: '请输入订单配送费!'}]}]"  style="width: 300px;"></a-input-number>
                </a-form-item>
                <a-form-item label='满多少免配送费' v-bind="formItemLayout">
                   <a-input-number :min="0" :precision="2" :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                   :parser="value => value.replace(/\￥\s?|(,*)/g, '')" v-decorator="['fullPrice',{rules:[{required: true, message: '请输入金额!'}]}]"  style="width: 300px;"></a-input-number>
                </a-form-item>
                <a-form-item label='会员费' v-bind="formItemLayout">
                   <a-input-number :min="0" :precision="2" :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                   :parser="value => value.replace(/\￥\s?|(,*)/g, '')" v-decorator="['memberAmount',{rules:[{required: true, message: '请输入会员费!'}]}]"  style="width: 300px;"></a-input-number>
                </a-form-item>
                <a-form-item label='骑手订单提成（包含水）' v-bind="formItemLayout">
                   <a-input-number :min="0" :precision="2" :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                   :parser="value => value.replace(/\￥\s?|(,*)/g, '')" v-decorator="['deductWater',{rules:[{required: true, message: '请输入订单提成!'}]}]"  style="width: 300px;"></a-input-number>
                </a-form-item>
                <a-form-item label='骑手订单提成（不包含水）' v-bind="formItemLayout">
                   <a-input-number :min="0" :precision="2" :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                   :parser="value => value.replace(/\￥\s?|(,*)/g, '')" v-decorator="['deduct',{rules:[{required: true, message: '请输入订单提成!'}]}]"  style="width: 300px;"></a-input-number>
                </a-form-item>
                <a-form-item :wrapperCol="{ span: 14, offset: 4 }">
                    <a-input type="hidden" v-decorator="['id']" />
                    <a-button type='primary'  @click="onSubmit" >保 存</a-button>
                </a-form-item>
            </a-form>
        </a-spin>
    </div>
</template>
<script>
    import {findDetail,save} from "../../api/setInfo";

    export default {
        beforeCreate(){
            this.form = this.$form.createForm(this);
        },
        data(){
            return{
                formLayout: 'horizontal',
                spinning:false,
            }
        },
        computed: {
            formItemLayout () {
                const { formLayout } = this
                return formLayout === 'horizontal' ? {
                    labelCol: { span:4},
                    wrapperCol: { span:16 },
                } : {}
            },
        },
        methods:{
            onSubmit(){
                this.form.validateFields((err,values) => {
                        if (!err) {
                            this.onSave(values);
                        }
                    },
                )
            },
            async onSave(data){
                this.spinning = true;
                let resp = await save(data);
                this.spinning = false;
                let _this = this;
                if(this.qUtil.validResp(resp)){
                    this.$success({title:'保存成功!',okText:'确定',
                        onOk(){_this.onLoad();}
                    });
                }else{
                    this.$error({title:resp.msg,okText:'确定'});
                    this.bntLoading = false;
                }
            },
            async onLoad(){
                this.spinning = true;
                let resp = await findDetail();
                this.spinning = false;
                if(!this.qUtil.validResp(resp)){
                    this.$error({title:resp.msg,okText:'确定'});
                   return false;
                }
                console.log("===resp",resp.data);
                var setInfo = resp.data.setInfo;
                if(setInfo!=null && setInfo.id!=null){
                    const {id,deduct,deductWater,depositAmount,memberAmount,beginPrice,deliverPrice,fullPrice,remark} = setInfo;
                    this.form.setFieldsValue({id,deduct,deductWater,depositAmount,memberAmount,beginPrice,deliverPrice,fullPrice,remark});
                }
            }
        },
        mounted(){
            this.onLoad();
        }
    }
</script>

<style scoped>

</style>